<template>
  <div>
    <el-container>
      <el-aside width="200px" background-color="white">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>

        <el-tree
          class="filter-tree"
          :data="data"
          :props="defaultProps"
          default-expand-all
          :filter-node-method="filterNode"
          ref="tree"
        ></el-tree>
      </el-aside>
      <el-main>
        <el-col :span="8" class="a">
          <el-input placeholder="请输入名称或者编码" v-model="filterText">
            <el-button slot="append" icon="el-icon-search"></el-button>
          </el-input>
        </el-col>
        <div class="ta">
          <el-button style="margin-left:20px" type="primary">添加</el-button>
          <el-button type="success">修改</el-button>
          <el-button type="danger">删除</el-button>
          <el-table :data="tableData" border style="width: 100%">
            <el-table-column type="index" label="序号" width="50"></el-table-column>
            <el-table-column prop="key" label="字典编码" width="80"></el-table-column>
            <el-table-column prop="value" label="字典名称" width="180"></el-table-column>
            <el-table-column prop="status" label="状态" width="100">
              <template slot-scope="scope">
                <el-switch
                  v-model="scope.row.status"
                  :active-value="1"
                  :inactive-value="0"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  @change="changeSwitch(scope.row.status)"
                />
              </template>
            </el-table-column>
            <el-table-column prop="createName" width="100" label="创建人"></el-table-column>
            <el-table-column prop="createName" width="100" label="更新人"></el-table-column>
            <el-table-column prop="createTime" label="创建时间" width="110"></el-table-column>
            <el-table-column prop="createTime" label="更新时间" width="110"></el-table-column>
          </el-table>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },

  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
  },

  data() {
    return {
      filterText: "",
      data: [
        {
          id: 1,
          label: "证件类型",
          children: [
            {
              id: 1,
              label: "身份证",
            },
            {
              id: 2,
              label: "护照",
            },
            {
              id: 3,
              label: "港澳通行证",
            },
          ],
        },
        {
          id: 2,
          label: "年龄",
          children: [
            {
              id: 1,
              label: "男",
            },
            {
              id: 0,
              label: "女",
            },
          ],
        },
        {
          id: 3,
          label: "一级 3",
          children: [
            {
              id: 7,
              label: "二级 3-1",
            },
            {
              id: 8,
              label: "二级 3-2",
            },
          ],
        },
      ],
      defaultProps: {
        children: "children",
        label: "label",
      },
      tableData: [
        {
          key: "XS1115",
          value: "16637531877",
          describle: "在线",
          status: 1,
          createName: "高邓",
          createTime: "1993-01-16",
        },
        {
          key: "XS1115",
          value: "16637531877",
          describle: "在线",
          status: 1,
          createName: "高邓",
          createTime: "1993-01-16",
        },
        {
          key: "XS1115",
          value: "16637531877",
          describle: "在线",
          status: 1,
          createName: "高邓",
          createTime: "1993-01-16",
        },
        {
          key: "XS1115",
          value: "16637531877",
          describle: "在线",
          status: 2,
          createName: "高邓",
          createTime: "1993-01-16",
        },
        {
          key: "XS1115",
          value: "16637531877",
          describle: "在线",
          status: 1,
          createName: "高邓",
          createTime: "1993-01-16",
        },
      ],
    };
  },
};
</script>

<style>
.a {
  margin: 20px 300px;
}
.ta {
  margin: 40px 50px;
}
</style>